<script setup>
import {ref} from "vue";
import UserSignInDialogView from "@/views/user/UserSignInDialogView.vue";
import UserSalaryDialogView from "@/views/user/UserSalaryDialogView.vue";
import {signIn, signOut} from "@/api/sign.js";
import UserLeaveDialogView from "@/views/user/UserLeaveDialogView.vue";
import {applyLeave} from "@/api/leave.js";
import {ElNotification} from "element-plus";

const signInStatus = ref(false);
const signOutStatus = ref(false);
const thisUser = ref(JSON.parse(localStorage.getItem('userInfo')))

const user = ref({
  name: thisUser.value.username,
  department: thisUser.value.name
})

const refCount = ref(0)

// 表单数据
const form = ref({
  username: thisUser.value.username,
  startDate: '',
  endDate: '',
  type: null,
  reason: '',
  status: 0
});

const handleSignIn = async () => {
  const result = await signIn(JSON.parse(localStorage.getItem('userInfo')).userId)
  if (result.code === 200) {
    ElNotification({
      title: '成功',
      message: '签到成功',
      type:'success',
      duration: 2000
    })
    refCount.value++
  }

}

const handleSignOut = async () => {
  const result = await signOut(JSON.parse(localStorage.getItem('userInfo')).userId)
  if (result.code === 200) {
    ElNotification({
      title: '成功',
      message: '签退成功',
      type:'success',
      duration: 2000
    })
    refCount.value++
  }

}

const handleLeaveStatus = ref(false)
const handleLeaveOpen = () => {
  handleLeaveStatus.value = true
}

const handleLeaveRequest = async () => {
  await applyLeave(form.value)
  handleLeaveStatus.value = false
  ElNotification({
    title: '成功',
    message: '请假申请成功',
    type:'success',
    duration: 2000

  })
  refCount.value++
}
</script>

<template>
  <div>
    <div class="top-container">
      <div class="item">
        <el-card>
          <div class="item-title">
            <div style="display: flex; justify-content: center; align-items: end;">
              <h2 style="margin-right: 20px;">{{ user.name }}</h2>
              <el-text type="primary">{{ user.department }}</el-text>
            </div>
            <div style="display: flex; justify-content: center; align-items: center;">
              <el-button type="success" @click="handleSignIn">签到</el-button>
              <el-button type="danger" @click="handleSignOut">签退</el-button>
            </div>
            <!--            <div style="margin-top: 20px;">-->
            <!--              <div>-->
            <!--                <el-text type="primary" style="margin-right: 10px;">签到状态:</el-text>-->
            <!--                <el-text v-if="signInStatus" type="success">已签到</el-text>-->
            <!--                <el-text v-else type="danger">未签到</el-text>-->
            <!--              </div>-->
            <!--              <div>-->
            <!--                <el-text type="warning" style="margin-right: 10px;">签退状态:</el-text>-->
            <!--                <el-text v-if="signOutStatus" type="success">已签退</el-text>-->
            <!--                <el-text v-else type="danger">未签退</el-text>-->
            <!--              </div>-->
            <!--            </div>-->
          </div>
        </el-card>
      </div>
      <div class="item">
        <el-card>
          <el-button type="primary" @click="handleLeaveOpen">请假申请</el-button>
          <el-dialog v-model="handleLeaveStatus" title="请假申请">
            <el-form :model="form" label-width="120px">
              <!-- 用户名 -->
              <el-form-item label="用户名">
                <el-input v-model="form.username" disabled />
              </el-form-item>

              <!-- 开始日期 -->
              <el-form-item label="开始日期">
                <el-date-picker
                    v-model="form.startDate"
                    type="date"
                    placeholder="选择开始日期"
                    value-format="YYYY-MM-DD"
                />
              </el-form-item>

              <!-- 结束日期 -->
              <el-form-item label="结束日期">
                <el-date-picker
                    v-model="form.endDate"
                    type="date"
                    placeholder="选择结束日期"
                    value-format="YYYY-MM-DD"
                />
              </el-form-item>

              <!-- 请假类型 -->
              <el-form-item label="请假类型">
                <el-select v-model="form.type" placeholder="请选择请假类型">
                  <el-option label="事假" :value=1 />
                  <el-option label="病假" :value=2 />
                  <el-option label="年假" :value=3 />
                </el-select>
              </el-form-item>

              <!-- 请假原因 -->
              <el-form-item label="请假原因">
                <el-input v-model="form.reason" type="textarea" />
              </el-form-item>
            </el-form>
            <template #footer>
              <el-button @click="handleLeaveStatus = false">取消</el-button>
              <el-button type="primary" @click="handleLeaveRequest">提交</el-button>
            </template>
          </el-dialog>
        </el-card>
      </div>
    </div>
    <div class="bottom-container">
      <div class="item">
        <el-card>
          <UserSignInDialogView :key="refCount"/>
        </el-card>
      </div>
      <div class="item">
        <el-card>
          <UserSalaryDialogView :key="refCount"/>
        </el-card>
      </div>
    </div>
    <div class="footer-container">
      <el-card style="height: 300px;">
        <UserLeaveDialogView :key="refCount"/>
      </el-card>
    </div>
  </div>
</template>

<style scoped>
.top-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.item {
  width: 25%;
}

.top-container > .item > .el-card {
  text-align: center;
  width: 80%;
  height: 200px;
}

.bottom-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.item {
  width: 50%;
  padding: 20px;
}

.bottom-container > .item > .el-card {
  width: 100%;
  height: 300px;
}
</style>
